import { useRef } from 'react';
import store from '../redux/store';
import Left from './Lelft';
import Right from './Right';
import type { TransferBoxContextParams } from './TransferBoxContext';
import TransferBoxContext from './TransferBoxContext';
import './card.less';

export type RefFn = { handleDeletItem: (id: number) => void };

function TransferBoxH5() {
  const leftRefFn = useRef<RefFn>(null);
  const rightRefFn = useRef<RefFn>(null);
  const handleDeletInsertItem: TransferBoxContextParams['onDeletInsertItem'] = (
    insertItem,
    targetParentName,
  ) => {
    const { id } = insertItem;
    if (targetParentName === 'left') {
      rightRefFn.current?.handleDeletItem(id);
    } else if (targetParentName === 'right') {
      leftRefFn.current?.handleDeletItem(id);
    }
  };

  return (
    <div className="sort-h5-card-page">
      <h4>
        原生h5
        中drag、drop事件绑定到同一个dom上(dragstart)就是无法保证每次都能触发drop事件
      </h4>
      <h4>
        e.dataTransfer.dropEffect不设置会增加drop事件执行几率,且鼠标光标出现＋
        号时表示可以执行drop事件
      </h4>
      <h4>问题的核心：</h4>
      <h4>
        {' '}
        1.drop执行的条件是 1.必须先执行 handleDragOver且在handleDragOver 中
        e.preventDefault(); 2.浏览器找到放置目标(鼠标光标出现＋ 号)
      </h4>
      <h4>
        {' '}
        2.只要 执行 handleDragOver且在handleDragOver 中
        e.preventDefault()就算没有绑定 drop事件，绑定dragStart的dom也不会回弹
      </h4>
      <div className="page-transfer">
        <TransferBoxContext.Provider
          value={{ onDeletInsertItem: handleDeletInsertItem, store }}
        >
          <div
            className="transfer-box"
            style={{
              display: 'flex',
              flexFlow: 'row nowarp',
              columnGap: '30px',
            }}
          >
            <Left ref={leftRefFn} />
            <div style={{ textAlign: 'center', lineHeight: '100%' }}>
              {' '}
              <span>----</span>{' '}
            </div>
            <Right ref={rightRefFn} />
          </div>
        </TransferBoxContext.Provider>
      </div>
    </div>
  );
}

export default TransferBoxH5;
